<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="seekForm">
        <el-form-item>
          <el-input v-model="seekForm.keyWord" placeholder="请输入页面名称" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="seekForm.status" placeholder="请选择状态">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="启用" value="normal"></el-option>
            <el-option label="禁用" value="close"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="warning" @click="onCreate">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="fullscreenLoading" @selection-change="handleSelectionChange"  tooltip-effect="dark" :data="tableData" style="width: 100%" :border="true"
        class="table-box" :stripe="true">
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="页面名称" align="center">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="160">
          <template #default="scope">
            {{ turnTime(scope.row.createdate) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-switch :value="scope.row.status == 'normal'" @change="changeStatus(scope.$index, scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" fixed="right" width="260">
          <template #default="scope">
            <!-- <el-button type="primary" size="mini" @click.prevent="onDetail(scope.row)">查看</el-button> -->
            <el-button type="warning" size="mini" @click.prevent="onUpdate(scope.row)">修改</el-button>
            <el-popconfirm title="您确定要删除此项吗?" @confirm="onDelete(scope.row)">
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="padding-lt-sm">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          v-model:currentPage="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
    
<script lang="ts" setup>
import { turnTime, LTTime } from "@/utils"
import useCurrentInstance from "@/common/useCurrentInstance";
import { reactive, computed, ref, onMounted } from 'vue'

import { useRouter, useRoute, useLink } from "vue-router";
const { proxy } = useCurrentInstance();

// 表格高度
const tableHeight = computed(() => {
  return store.state.app.tableHeight;
})
// 分页
const seekForm = reactive({
  keyWord: "",
  status: ""
})
const fullscreenLoading = ref(false);
const currentPage = ref(1);
const size = ref(20);
const total = ref(20);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  size.value = val;
  getPageList();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val;
  getPageList();
}

let multipleTable: Array<any> = [];
const handleSelectionChange = (val: any) => {
  multipleTable = val;
  console.info(multipleTable);
}

const onSubmit = () => {
  getPageList();
  console.log('submit!')
}

onMounted(() => {
  // getPageList();
})
const tableData = ref([]);
const getPageList = () => {
  fullscreenLoading.value = true;
  let params = {
    pageSize: size.value,
    pageNumber: currentPage.value,
    ...seekForm
  }
  // diyList(params).then((response: any) => {
  //   fullscreenLoading.value = false;
  //   tableData.value = response.data.list;
  //   total.value = response.data.total;
  // }).catch((error: any) => {
  //   fullscreenLoading.value = false;
  //   tableData.value = [];
  //   console.info('error', error);
  // })
}

const changeStatus = (index: number, event: any) => {
  const params = {
    id: event.id,
    status: event.status == 'normal' ? 'close' : 'normal'
  }
  // diyUpdateStatus(params).then((response: any) => {
  //   event.status = event.status == 'normal' ? 'close' : 'normal'
  // }).catch((error: any) => {
  //   console.info(error)
  // })
}
const onDelete = (event:any) =>{
  console.info(event);
  // diyDelete({id:event.id}).then((response:any)=>{
  //   console.info(response);
  //   getPageList();
  // }).catch((error:any)=>{
  //   console.info(error);
  // })
}
const router = useRouter();
const onCreate = () => {
  router.push({
    path: '/component_basic_example/page/create'
  })
}
const onUpdate = (event:any) => {
  router.push({
    path: '/component_basic_example/page/update',
    query:{id:event.id}
  })
}

</script>